<div class="col-md-12" ng-controller="ClusterSingleDBController">


  <div class="row row-space">

    <div class="col-md-12">
      <div id="menu" class="panel panel-default list-group">
        <div class="panel-heading">
          <b> Configuration</b>
          <a href="{{ links['configuration'] }}" class="btn btn-trasparent btn-help"
             data-placement="right"
             data-title="Help"
             target="_blank"
             data-trigger="hover"
             data-animation="am-flip-x"
             bs-tooltip>
            <i class="fa fa-question-circle"></i>
          </a>
          <div class="panel-node-actions">
            <div class="btn-toolbar">
              <div class="btn-group pull-right">
                <button class="btn btn-sm btn-primary" ng-click="saveConfig()"><i class="fa fa-save"></i> Save Config
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-body">

          <div class="col-md-6">
            <form class="form-horizontal">
              <div class="form-group">
                <label class="control-label col-md-3">Write Quorum
                  <a href="javascript:void(0)" tabindex="1"
                     data-trigger="focus" data-placement="right"
                     data-container="body"
                     data-content="{{ 'cluster.writeQuorum' | translate:links }}" bs-popover>
                    <i class="fa fa-question-circle"></i>
                  </a>
                </label>
                <div class="col-md-9">
                  <ui-select tagging ng-model="config.writeQuorum" theme="selectize" title="Choose write quorum">
                    <ui-select-match placeholder="Select write quorum...">{{$select.selected}}</ui-select-match>
                    <ui-select-choices repeat="q in quorums | filter: $select.search">
                      <div ng-bind-html="q | highlight: $select.search"></div>
                    </ui-select-choices>
                  </ui-select>
                  </input>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-md-3">Read Quorum
                  <a href="javascript:void(0)" tabindex="1"
                     data-trigger="focus" data-placement="right"
                     data-container="body"
                     data-content="{{ 'cluster.readQuorum' | translate:links }}" bs-popover>
                    <i class="fa fa-question-circle"></i>
                  </a>
                </label>

                <div class="col-md-9">
                  <input type="number" class="form-control"
                         ng-model="config.readQuorum">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" ng-model="config.autoDeploy"
                             ng-change="change('autoDeploy')"> Auto Deploy
                      <a href="javascript:void(0)" tabindex="1"
                         data-trigger="focus" data-placement="right"
                         data-container="body"
                         data-content="{{ 'cluster.autoDeploy' | translate:links }}" bs-popover>
                        <i class="fa fa-question-circle"></i>
                      </a>
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-9 col-md-offset-3">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"
                             ng-model="config.readYourWrites">
                      Read Your Writes
                      <a href="javascript:void(0)" tabindex="1"
                         data-trigger="focus" data-placement="right"
                         data-container="body"
                         data-content="{{ 'cluster.readYourWrites' | translate:links }}" bs-popover>
                        <i class="fa fa-question-circle"></i>
                      </a>

                    </label>
                  </div>
                </div>
              </div>

            </form>
          </div>
          <div class="col-md-6">
            <form class="form-horizontal">
              <div class="form-group">

                <!--<label class="control-label col-md-2">Servers </label>-->

                <div class="panel panel-default">
                  <div class="panel-heading">
                    <b>Servers</b>
                  </div>
                  <div class="panel-body">
                  </div>

                  <table class=" table table-striped  table-hover table-condensed ">
                    <thead>
                    <tr>
                      <th>Server</th>
                      <th>Status</th>
                      <th>Role
                        <a href="javascript:void(0)" tabindex="1"
                           data-trigger="focus" data-placement="right"
                           data-container="body"
                           data-content="{{ 'cluster.role' | translate:links }}" bs-popover>
                          <i class="fa fa-question-circle"></i>
                        </a>
                      </th>
                      <th>Actions</th>
                    </tr>

                    </thead>
                    <tbody>
                    <tr ng-repeat="s in servers">

                      <td>
                        <a href="#!/dashboard/general/{{s.name}}">{{s.name}}</a>
                      </td>
                      <th>{{s.status}}</th>
                      <td>
                        <select class="form-control" ng-model="calculatedRoles[s.name]"
                                ng-options="role for role in roles"></select>
                      </td>
                      <td>
                        <div class="btn-toolbar">
                          <div class="btn-group">
                            <button class="btn btn-xs btn-danger" ng-click="removeServer(s)"
                                    data-trigger="hover" data-placement="top"
                                    data-container="body"
                                    bs-tooltip="removeServerTooltip"
                            ><span
                              class="fa fa-remove pointer"></span>
                            </button>
                          </div>

                          <div class="btn-group">
                            <button class="btn btn-xs btn-default" ng-click="syncDatabase(s)"
                                    data-trigger="hover" data-placement="top"
                                    data-container="body"
                                    bs-tooltip="syncDatabaseTooltip"
                            ><span
                              class="fa fa-refresh pointer"></span>
                            </button>
                          </div>

                          <div class="btn-group">
                            <button class="btn btn-xs btn-default" ng-show="s.status == 'OFFLINE'"
                                    ng-click="startReplication(s)"
                                    data-trigger="hover" data-placement="top"
                                    data-container="body"
                                    bs-tooltip="startReplicationTooltip"
                            ><span
                              class="fa fa-play pointer"></span>
                            </button>
                          </div>
                          <div class="btn-group" ng-show="s.status == 'ONLINE'">
                            <button class="btn btn-xs btn-default" ng-click="stopReplication(s)"
                                    data-trigger="hover" data-placement="top"
                                    data-container="body"
                                    bs-tooltip="stopReplicationTooltip"
                            ><span
                              class="fa fa-pause pointer"></span>
                            </button>
                          </div>
                        </div>

                      </td>
                    </tr>

                    </tbody>
                  </table>
                </div>
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <form class="form-horizontal">
              <div class="form-group">
                <div class="panel panel-default">
                  <div class="panel-heading">
                    <b>Data Centers</b>
                    <a href="{{ links['dataCenters'] }}" class="btn btn-trasparent btn-help"
                       data-placement="right"
                       data-title="Help"
                       target="_blank"
                       data-trigger="hover"
                       data-animation="am-flip-x"
                       bs-tooltip>
                      <i class="fa fa-question-circle"></i>
                    </a>
                    <div class="panel-node-actions">
                      <div class="btn-toolbar">
                        <div class="btn-group pull-right">
                          <button class="btn btn-sm btn-success" ng-click="addDataCenter()"><i
                            class="fa fa-plus-circle"></i>
                            Add DataCenter
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="panel-body">
                  </div>

                  <table class=" table table-striped  table-hover table-condensed ">
                    <thead>
                    <tr>
                      <th>Data Center</th>
                      <th>Write Quorum</th>
                      <th>Servers
                      </th>
                      <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="(k,v) in config.dataCenters">
                      <td>
                        {{k}} <a href="javascript:void(0)" ng-click="renameDataCenter(k)"><span
                        class="fa fa-edit "></span></a>
                      </td>
                      <td>
                        <ui-select tagging ng-model="v.writeQuorum" theme="selectize" title="Choose write quorum">
                          <ui-select-match placeholder="Select write quorum...">{{$select.selected}}</ui-select-match>
                          <ui-select-choices repeat="q in dcQuorums[k] | filter: $select.search">
                            <div ng-bind-html="q | highlight: $select.search"></div>
                          </ui-select-choices>
                        </ui-select>
                      </td>
                      <td>

                        <tags-input ng-model="serverTags[k]" placeholder="Add Server" add-from-autocomplete-only="true"
                                    display-property="name" on-tag-added="serverAdded(k,$tag)"
                                    on-tag-removed="serverRemoved(k,$tag)">
                          <auto-complete min-length="0"
                                         debounce-delay="0"
                                         max-results-to-show="10" source="loadServers()"></auto-complete>
                        </tags-input>

                      </td>

                      <td>
                        <div class="btn-toolbar">
                          <div class="btn-group">
                            <button class="btn btn-xs btn-danger" ng-click="removeDataCenter(k)"
                                    data-trigger="hover" data-placement="top"
                                    data-container="body"
                                    bs-tooltip="removeDataCenterTooltip"
                            ><span
                              class="fa fa-remove pointer"></span>
                            </button>
                          </div>
                        </div>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="panel panel-default list-group">
        <div class="panel-heading">
          <b> Clusters Distribution
            <a href="javascript:void(0)" tabindex="1"
               data-trigger="focus" data-placement="right"
               data-container="body"
               data-content="{{ 'cluster.distribution' | translate:links }}" bs-popover>
              <i class="fa fa-question-circle"></i>
            </a>
          </b> <span class="pull-right"> <b>LEGEND: </b> X = Owner, o = Copy </span>
        </div>
        <table class=" table table-striped  table-hover table-condensed ">
          <thead>
          <tr>
            <th>#</th>
            <th>Static Owner</th>
            <th ng-repeat="s in servers">
              <a href="#!/dashboard/general/{{s.name}}">{{s.name}}</a>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="(key,value) in config.clusters">
            <td>
              {{key}}
            </td>
            <td>
              <select class="form-control" ng-model="value.owner" ng-options="s.name as s.name for s in servers">
                <option value=""></option>
              </select>
            </td>
            <td ng-repeat="s in servers">

              <div class="col-md-4">
                <span> {{ getOwnership(key,s.name) }}</span>
              </div>
              <div class="col-md-8">
                <div class="btn-toolbar pull-right">
                  <div class="btn-group">
                    <button class="btn btn-sm btn-default" data-trigger="hover" data-placement="top"
                            data-container="body"
                            bs-tooltip="syncClusterTooltip" ng-click="syncCluster(key,s.name)">
                      <i class="fa fa-refresh"></i>
                    </button>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

